<template>
  <div class="result_vote">
    <head-top head-title="查看投票结果" goBack="true"></head-top>
    <div class="no-data" style="padding-top:250px; text-align: center; font-size:20px" v-if="code === 400">
      {{message}}
    </div>
    <!--选举投票（旧版）-->
    <div class="vote_box" v-if="type === 'can' && code === 200 && newold === 'vote'">
      <div class="vote_list" v-for="(can,index) in dataList" :key="'ca'+index">
        <div class="border-bottom">
          <div class="introduce">
            <div class="img_people">
              <img
                :src="can.img?can.img:defaultImg"
                alt="">
            </div>
            <div class="content_word">
              <div class="word_top">
                <p>{{can.options}}</p>
                <span>{{can.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{can.house}}</p>
                <!--选举--人物-->
                <router-link v-if="canStyle==2" :to="'/home/VotingDetail/'+can.candidateId+'/'+2+'/'+'old'" tag="span">查看详细内容</router-link>
                <!--选举--事项-->
                <router-link v-if="canStyle==1" :to="'/home/VotingDetail/'+can.candidateId+'/'+1+'/'+'old'" tag="span">查看详细内容</router-link>
              </div>
            </div>
          </div>
          <div class="vote_result" v-if="can.type!==''">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_text">
              <span>{{can.type}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新版-->
    <div class="stub_man" v-if="type === 'can' && code === 200 && newold === 'voting'">
      <div class="stub_sigle">
        <div class="stub_sigle_title">
          <span>▍</span>{{detail.title}}
        </div>
        <div class="stub_li" v-for="(man,mindex) in detail.data" :key="mindex">
          <div class="stub_li_left">
            <div class="stub_pic">
              <img :src="man.img_url?man.img_url:defaultImg"
                     mode=""></img>
            </div>
            <div class="stub_name_home">
              <div class="name_result">
                <div class="name_left">{{man.name}}</div>
                <div class="name_right" v-if="man.option">投票结果：<span>{{man.option}}</span></div>
              </div>
              <div class="stub_home">房号：{{man.house}}</div>
            </div>
          </div>
          <div class="stub_li_righe" @click="$router.push('/home/VotingDetail/'+man.id+'/'+2+'/'+'new')">
            <img src="./images/man_jianjie@2x.png" mode=""></img>
            <span>简介</span>
          </div>
        </div>
        <!-- 暂无具体候选人情况 -->
        <div class="not_li" v-if="detail.data.length===0">投票结果：{{detail.option}}</div>
      </div>
      <div class="idea_collect" v-if="detail.opinion">
        <p>意见反馈：</p>
        <div class="textarea_box">
          <span>{{detail.opinion}}</span>
        </div>
      </div>
    </div>


    <!--事务投票（旧版）-->
    <div class="vote_box" v-if="type === 'sup' && code === 200 && newold === 'vote'">
      <div class="vote_list" v-for="(sup,index2) in dataList" :key="'su'+index2">
        <div class="border-bottom">
          <div class="introduce">
            <div class="img_people">
              <img src="./images/Hdefault.png" alt="">
            </div>
            <div class="content_word">
              <div class="word_top">
                <p>{{sup.options}}</p>
                <span>{{sup.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>{{sup.content}}</p>
                <router-link :to="'/home/VillageDetail/'+sup.articleId+'/' + 'vote'" tag="span">查看详细内容</router-link>
              </div>
            </div>
          </div>
          <div class="vote_result" v-if="sup.type !==''">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_text">
              <span>{{sup.type}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新版-->
    <div class="work_ul" v-if="type === 'sup' && code === 200 && newold === 'voting'">
      <div class="work_li" v-for="(work,windex) in detail.data" :key="windex">
        <div class="work_li_title">
          <div class="li_title_top">
            {{work.title}}
          </div>
          <div class="li_title_detail" v-if="work.type===1" @click="goWorkDetail(work.options_article_id)">
            <img src="./images/man_jianjie@2x.png" mode=""></img>
            <span>查看详情</span>
          </div>
        </div>
        <div class="work_result">
          <div class="work_result_left">投票结果：</div>
          <div class="work_result_right">
            <div class="result_li" v-for="(a,aindex) in work.results" :key="aindex">
              <div class="result_title">{{a.option}}</div>
              <div class="reuslt_pic" v-if="a.type!==0"  @click="goWorkDetail(a.id)">
                <img src="./images/man_jianjie@2x.png" mode=""></img>
                <span>查看详情</span>
              </div>
            </div>
          </div>
        </div>
        <div class="idea_collect" v-if="work.opinion">
          <p>意见收集框：</p>
          <div class="textarea_box">
            <span>{{work.opinion}}</span>
          </div>
        </div>
      </div>
    </div>

    <!--满意度投票选项类型（旧版）-->
    <div class="satisfied" v-if="type === 'sat' && code === 200 && newold=== 'vote'">
      <div class="all_box" v-for="(sat,index3) in dataList.data" :key="'sa'+index3">
        <div class="candidate">
          <div class="introduce">
            <div class="word_bottom">
              <p>{{sat.title}}</p>
            </div>
          </div>
          <!--选项类别-->
          <div class="answer">
            <img src="./images/xuanzhong@2x.png" alt="">
            <div class="result_sat">
              <span>{{sat.type}}</span>
            </div>
          </div>
          <div class="check_detail" @click="$router.push('/home/TakeInResult/'+sat.article_id)">查看详细内容></div>
        </div>
        <div class="all_line"></div>
      </div>
      <div class="view_des">
        <div class="box_title border-bottom">
          <span>总体整改建议：</span>
        </div>
        <p>{{dataList.content.content}}</p>
      </div>
    </div>
    <!--新版-->
    <div class="mark_part" v-if="type === 'sat' && code === 200 && newold=== 'voting'">
      <div class="mark_title">
        <span>▍</span>投票结果
      </div>
      <div class="mark_box">
        <div class="mark_li" v-for="(sat,sindex) in detail.data" :key="sindex">
          <div class="mark_topics">
            <div class="topics_left">{{sat.title}}</div>
            <div class="topics_right" @click="goWorkDetail(sat.options_article_id)">
              <span>{{sat.is_score === 1?'评分内容':'查看详情'}}</span>
              <div class="yuan_bg">
                <div class="jiantou"></div>
              </div>
            </div>
          </div>
          <div class="mark_remarks">
            <p v-if="sat.is_score===1">满意度评分：<span>{{sat.results.option}}（分）</span></p>
            <p v-else>投票结果：<span>{{sat.results.option}}</span></p>
            <div class="remarks_part" v-if="sat.opinion">
              <p>备注：</p>
              <div class="textarea_box">
                <span>{{sat.opinion}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <view class="idea_collect" v-if="detail.opinion">
        <p>总体意见反馈：</p>
        <view class="textarea_box">
          <text>{{detail.opinion}}</text>
        </view>
      </view>
    </div>
  </div>
</template>
<style lang="scss">
  .result_vote {
    width: 100%;
    padding-top: 40px;
    .vote_box {
      width: 100%;
      .vote_list {
        height: 90px;
        &:last-child {
          .border-bottom {
            background-size: 100% 0;
          }
        }
        .border-bottom {
          margin: 0 10px;
        }
        .introduce {
          width: 100%;
          height: 60px;
          .img_people {
            padding-top: 10px;
            float: left;
            width: 14%;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
            }
          }
          .content_word {
            float: left;
            width: 86%;
            .word_top {
              margin-top: 10px;
              height: 22px;
              p {
                font-size: 15px;
                float: left;
                width: 170px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 10px;
                color: #999999;
              }
            }
            .word_bottom {
              height: 22px;
              line-height: 22px;
              p {
                font-size: 12px;
                float: left;
                color: #666666;
                line-height: 20px;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 12px;
                color: #0078de;
              }
            }
          }
        }
        .vote_result {
          width: 100%;
          display: inline-flex;
          justify-content: flex-end;
          align-items: center;
          padding-bottom: 10px;
          img {
            width: 20px;
            height: 20px;
            padding-left: 10px;
          }
          .result_text {
            padding-left: 10px;
            width: 40px;
            text-align: right;
            span {
              color: #999;
            }
          }
        }
      }
    }
    .satisfied {
      width: 100%;
      .all_box {
        width: 100%;
        .candidate {
          padding: 10px;
          .introduce {
            width: 100%;
            height: 44px;
            .word_bottom {
              height: 22px;
              line-height: 44px;
              p {
                font-size: 14px;
                float: left;
                color: #292929;
                line-height: 20px;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                float: right;
                font-size: 13px;
                color: #0078de;
              }
            }
          }
          .answer {
            width: 100%;
            height: 45px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            img {
              width: 20px;
              height: 20px;
              padding-left: 10px;
            }
            .result_sat {
              padding-left: 10px;
              span {
                color: #999;
                font-size: 14px;
              }
            }
          }
          .check_detail{
            font-size: 14px;
            margin-top: 10px;
            color: #0078de;
          }
          .line_gray {
            width: 100%;
            height: 5px;
            background: #f2f2f2;
          }
        }
        .all_line {
          width: 100%;
          height: 10px;
          background: #f2f2f2;
        }
      }
      .view_des {
        padding: 10px;
        .box_title {
          padding: 13px 0;
          span {
            font-size: 15px;
            color: #666666;
          }
        }
        p {
          padding-top: 10px;
          font-size: 13px;
          color: #666;
          line-height: 20px;
        }
      }
    }
    .satisForm{
      width: 100%;
      .satisForm_ul{
        width: 100%;
        .satisForm_li{
          border-bottom: 1px solid #f2f2f2;
          padding: 10px;
          .form_title{
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title_left{
              font-size: 18px;
            }
            .title_right{
              font-size: 15px;
              color: #0178DE;
            }

          }
          .satis_score{
            color: #898989;
            font-size: 15px;
            margin: 10px 0;
            span{
              font-size: 16px;
              color: #595959;
            }
          }
          .satis_remarks{
            p{
              font-size: 15px;
              color: #595959;
            }
            textarea{
              width: 94%;
              padding: 10px;
              margin-top: 10px;
              border: none;
              background: #f2f2f2;
              resize: none;
              outline: none;
              border-radius: 5px;
            }
          }

        }
      }
    }
    // 新版选举
    .stub_man{
      background: #F3F5FD;
      min-height: 100vh;
      .stub_sigle{
        // border-bottom: 20rpx solid #F3F3F3;
        background: #FFFFFF;
        .stub_sigle_title{
          border-bottom: 1px solid #F3F3F3;
          padding: 10px;
          font-size: 16px;
          color: #333333;
          span{
            color: #397CBD;
          }
        }
        .stub_li{
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #F3F3F3;
          padding: 10px 0;
          width: 100%;
          .stub_li_left{
            width: 75%;
            display: inline-flex;
            align-items: center;
            padding: 0 10px;
            .stub_pic{
              margin-right: 10px;
              img{
                width: 54px;
                height: 54px;
                border-radius: 50%;
              }
            }
            .stub_name_home{
              width: 100%;
              .name_result{
                color: #333333;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                .name_left{
                  font-size: 15px;
                  color: #333333;
                }
                .name_right{
                  font-size: 13px;
                  color: #666666;
                  span{
                    color: #397CBD;
                  }
                }
              }
              .stub_home{
                font-size: 12px;
                color: #999999;
                font-weight: lighter;
                margin-top: 10px;
              }
            }
          }
          .stub_li_righe{
            display: inline-flex;
            align-items: center;
            padding: 10px 10px 10px 0;
            img{
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
            span{
              font-size: 13px;
              color: #397CBD;
            }
          }
        }
        .not_li{
          padding: 30px;
          font-size: 15px;
          color: #333333;
        }
      }
      .stub_sigle:last-child{
        border-bottom: none;
      }
      .idea_collect{
        padding: 10px;
        margin-top: 10px;
        background: #FFFFFF;
        p{
          font-size: 15px;
          color: #666666;
        }
        .textarea_box{
          width: 94%;
          padding: 10px;
          border-radius: 10px;
          background: #F5F5F5;
          font-size: 15px;
          color: #666666;
          margin-top: 10px;
        }
      }
      .counterfoil{
        padding: 10px;
        background: #D1E8FF;
        color: #397CBD;
        font-size: 15px;
        border-radius: 10px;
        width: 20%;
        text-align: center;
        letter-spacing: 5px;
        margin-top: 10px;
        margin-left: 10px;
      }
    }
    // 新版事务
    .work_ul{
      padding: 10px;
      background: #F3F5FD;
      min-height: 100vh;
      .work_li{
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #F3F5FD;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
        margin-bottom: 20px;
        background: #FFFFFF;
        .work_li_title{
          padding: 20px 0;
          .li_title_top{
            font-size: 16px;
            color: #333333;

          }
          .li_title_detail{
            align-items: center;
            width: 100%;
            justify-content: flex-end;
            display: inline-flex;
            img{
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
            span{
              font-size: 13px;
              color: #397CBD;
            }
          }
          border-bottom: 1px solid #F3F3F3;
        }
        .work_result{
          width: 100%;
          display: inline-flex;
          padding: 10px 0;
          .work_result_left{
            color: #666666;
            font-size: 15px;
            width: 25%;
            margin-top: 4px;
          }
          .work_result_right{
            width: 75%;
            .result_li{
              width: 100%;
              display: inline-flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 20px;
              .result_title{
                font-size: 14px;
                color: #397CBD;
              }
              .reuslt_pic{
                display: inline-flex;
                align-items: center;
                img{
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                }
                span{
                  font-size: 13px;
                  color: #397CBD;
                }
              }
            }
          }
        }
        .idea_collect{
          background-color: #FFFFFF;
          p{
            font-size: 15px;
            color: #666666;
          }
          .textarea_box{
            width: 94%;
            padding: 10px;
            border-radius: 10px;
            background: #F5F5F5;
            font-size: 15px;
            color: #666666;
            margin-top: 10px;
          }
        }
      }
    }
    // 新版满意度
    .mark_part{
      background: #F3F5FD;
      min-height: 100vh;
      .mark_title{
        border-bottom: 1px solid #F3F3F3;
        padding: 20px 10px;
        font-size: 16px;
        color: #333333;
        background-color: #FFFFFF;
        span{
          color: #397CBD;
        }
      }
      .mark_box{
        padding: 10px;
        .mark_li{
          padding: 10px;
          background: #FFFFFF;
          border: 1px solid #F3F5FD;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
          border-radius: 10px;
          margin-top: 15px;
          .mark_topics{
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F3F3F3;
            padding-bottom: 10px;
            .topics_left{
              width: 73%;
              color: #333333;
              font-size: 16px;
            }
            .topics_right{
              display: inline-flex;
              align-items: center;
              span{
                font-size: 13px;
                color: #397cbd;
                padding-right: 10px;
              }
              .yuan_bg{
                width: 20px;
                height: 20px;
                background: #397cbd;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                .jiantou{
                  width: 8px;
                  height: 8px;
                  border-top: 2px solid #FFFFFF;
                  border-right: 2px solid #FFFFFF;
                  transform: rotate(45deg);
                  margin-left: 3px;
                }
              }
            }
          }
          .option_topics{
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            .topics_left{
              width: 75%;
              color: #333333;
              font-size: 15px;
            }
            .topics_right{
              display: inline-flex;
              align-items: center;
              span{
                font-size: 15px;
                color: #397cbd;
                padding-right: 10px;
              }
              .yuan_bg{
                width: 20px;
                height: 20px;
                background: #397cbd;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                .jiantou{
                  width: 8px;
                  height: 8px;
                  border-top: 2px solid #FFFFFF;
                  border-right: 2px solid #FFFFFF;
                  transform: rotate(45deg);
                  margin-left: 3px;
                }
              }
            }
          }
          .mark_remarks{
            p{
              font-size: 15px;
              color: #666666;
              span{
                color: #397cbd;
              }
            }
            margin-top: 10px;
            .remarks_part{
              margin-top: 10px;
              p{
                font-size: 15px;
                color: #666666;
              }
              .textarea_box{
                width: 94%;
                padding: 10px;
                border-radius: 10px;
                background: #F5F5F5;
                font-size: 15px;
                color: #666666;
                margin-top: 10px;
              }
            }
          }
        }
      }

      .option_style{
        border-bottom: 10px solid #F3F3F3;
      }
      .idea_collect{
        padding: 10px;
        margin-top: 10px;
        background: #FFFFFF;
        p{
          font-size: 15px;
          color: #333333;
        }
        .textarea_box{
          width: 94%;
          padding: 10px;
          border-radius: 10px;
          background: #F5F5F5;
          font-size: 15px;
          color: #666666;
          margin-top: 10px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { getResult, getManDetai, getManDetai2, getDetail, getSatData } from '../../api/MyIdent'

  export default {
    name: 'MyVote',
    data () {
      return {
        defaultImg: require('../home/images/man_icon@2x.png'),
        type: '', // 投票类型 (can:选举，sup:事物，sat:满意度)
        newold: '', // 判断新老版本投票（vote:老版，voting：新版）
        otype: {
          type: Number // 区分选举（0：候选人为选项  1：候选人为议题）
        },
        dataList: [], // 老版数据
        detail: {}, // 新版数据
        message: '',
        code: '',
        canStyle: {
          type: Number // 判断选举投票是选人(2)还是选事(1)
        }
      }
    },
    components: {
      headTop
    },
    created () {
      this.type = this.$route.query.type
      this.canStyle = this.$route.query.style
      this.newold = this.$route.query.newold
      this.otype = this.$route.query.otype
      console.log(this.newold)
      if (this.newold === 'vote') {
        this._getResult()
      } else {
        if (this.type === 'can') { // 选举
          if (this.otype === 1 || this.otype === '1') {
            this._getManDetai2()
          } else {
            this._getManDetai()
          }
        } else if (this.type === 'sup') { // 事务
          this._getDetail()
        } else if (this.type === 'sat') { // 满意度
          this._getSatData()
        }
      }
    },
    methods: {
      // 老版数据
      _getResult () {
        getResult(this.$route.query.id, this.$route.query.type).then(res => {
          // this.type = this.$route.params.type
          // console.log(res)
          this.code = res.code
          if (res.code === 200) {
            this.dataList = res.data
          }
          if (res.code === 400) {
            this.message = res.error.message
          }
        })
      },
      // 新版选举数据（候选人为选项）
      _getManDetai() {
        getManDetai(this.$route.query.id).then(res => {
          // console.log(res)
          this.code = res.code
          if (res.code === 200) {
            this.detail = res.data
            console.log(res.data)
          }
          if (res.code === 400) {
            this.message = res.error
          }
        })
      },
      // 新版选举数据（候选人为议题）
      _getManDetai2() {
        getManDetai2(this.$route.query.id).then(res => {
          // console.log(res)
          this.code = res.code
          if (res.code === 200) {
            this.detail = res.data
            console.log(res.data)
          }
          if (res.code === 400) {
            this.message = res.error
          }
        })
      },
      // 事务数据
      _getDetail() {
        getDetail(this.$route.query.id).then(res => {
          // console.log(res)
          this.code = res.code
          if (res.code === 200) {
            this.detail = res.data
            console.log(res.data)
          }
          if (res.code === 400) {
            this.message = res.error
          }
        })
      },
      // 选举数据
      _getSatData() {
        getSatData(this.$route.query.id).then(res => {
          // console.log(res)
          this.code = res.code
          if (res.code === 200) {
            this.detail = res.data
            console.log(res.data)
          }
          if (res.code === 400) {
            this.message = res.error
          }
        })
      },
      // 新版事务，满意度查看详情
      goWorkDetail(id) {
        this.$router.push({
          path: '/my/NewVoteDetail',
          query: {
            id: id
          }
        })
      }
    }
  }
</script>
